<template>
  <div class="detailFix">
    <div class="fixTop">
      <p>适合肤质范围</p>
      <img src="../../assets/images/detailFixque.png" alt="" />
    </div>
    <!-- 中间区域 -->
    <div class="fixCenter">
      <div class="centerTitle">
        <div>
          <img src="../../assets/images/detailImg.png" alt="" />
          <p>适用范围</p>
        </div>
        <div>
          <img src="../../assets/images/detailImg01.png" alt="" />
          <p>最适范围</p>
        </div>
        <div>
          <img src="../../assets/images/detailImg02.png" alt="" />
          <p>非适用范围</p>
        </div>
      </div>
      <!-- 干油性 -->
      <div class="centerOne">
        <p>干油性</p>
        <div class="centerOnediv">
          <img src="../../assets/images/detailCenter.png" alt="" />
          <div>
            <span>干</span>
            <span>偏干</span>
            <span>正常</span>
            <span>混合</span>
            <span>油</span>
            <span>偏油</span>
          </div>
        </div>
      </div>
      <!-- 敏感性 -->
      <div class="centerOne">
        <p>敏感性</p>
        <div class="centerOnediv">
          <img src="../../assets/images/detailCenter1.png" alt="" />
          <div>
            <span>耐受</span>
            <span>正常</span>
            <span>轻敏</span>
            <span>重敏</span>
          </div>
        </div>
      </div>
      <!-- 痘痘程度 -->
      <div class="centerOne">
        <p>痘痘程度</p>
        <div class="centerOnediv">
          <img src="../../assets/images/detailCenter2.png" alt="" />
          <div>
            <span>无痘</span>
            <span>轻度</span>
            <span>中度</span>
            <span>重度</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 匹配度 -->
    <div class="fixBottom">点此查看你与这款产品的匹配度</div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.detailFix {
  width: 90%;
  margin: 70px auto;

  .fixTop {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      font-size: 34px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
    }
    img {
      width: 45px;
      height: 45px;
      display: block;
    }
  }
  .fixCenter {
    width: 90%;
    margin: 30px auto;
    .centerTitle {
      width: 100%;
      height: 46px;
      background-color: #f8f8f8;
      border-radius: 46px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 75px;
      div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        p {
          font-size: 22px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
        img {
          width: 22px;
          height: 10px;
          margin-right: 10px;
        }
      }
    }
  }
  .fixBottom {
    width: 100%;
    height: 92px;
    background: url(../../assets/images/detailFixbottom.png) no-repeat;
    background-size: 100% 100%;
    font-size: 28px;
    text-align: center;
    font-family: PingFang SC;
    font-weight: bold;
    color: #31cbc9;
    line-height: 92px;
  }
  .centerOne {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 60px;
    p {
      font-size: 26px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #48a9a9;
    }
    .centerOnediv {
      img {
        width: 468px;
        display: block;
      }
      div {
        display: flex;
        justify-content: space-around;
        span {
          font-size: 25px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #6e6e6e;
        }
      }
    }
  }
}
</style>
